<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的单词列表</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		var i = 0;
		$("#show-button").click(function(){
			if(i == 0){
				i = 1;
				$(this).html("显示词义");
				$(".meaning").hide();
			} else{
				i = 0;
				$(this).html("隐藏词义");
				$(".meaning").show();
			}
			
		});
		$(".word").mouseover(function(){
			$(this).next().toggle();
		});
	});
</script>
<link rel="stylesheet" type="text/css" href="/common.css">
<style type="text/css">
	#content{
		background-color: white;
		margin-bottom: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		width: 600px;
		padding: 20px 20px;
	}
</style>
</head>
<body>
	<div id="content">
		<%@ include file="word-header.jsp" %>
		<div id="main">
			<button id="show-button">隐藏词义</button>
			<table>
				<thead>
					<tr>
						<th>单词</th>
						<th>词义</th>
						
					</tr>
				</thead>
				<tbody>
					<c:forEach var="word" items="${words}">
						<tr>
							<td  class="word">${word.wordString}</td>
							<td class="meaning">${word.meaning}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>